import React, { useState } from 'react';
import TranslatorHeader from '@/components/translator/TranslatorHeader';
import LanguageSelector from '@/components/translator/LanguageSelector';
import FontSizeControl from '@/components/translator/FontSizeControl';
import TranslationResult from '@/components/translator/TranslationResult';
import InputBar from '@/components/translator/InputBar';

const TranslatorPage: React.FC = () => {
  const [sourceLanguage, setSourceLanguage] = useState('auto');
  const [targetLanguage, setTargetLanguage] = useState('zh');
  const [fontSize, setFontSize] = useState<'small' | 'medium' | 'large'>('medium');
  const [inputText, setInputText] = useState('');
  const [isSpeakerOn, setIsSpeakerOn] = useState(false);

  const handleSwapLanguages = () => {
    if (sourceLanguage !== 'auto') {
      const temp = sourceLanguage;
      setSourceLanguage(targetLanguage);
      setTargetLanguage(temp);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      {/* Fixed Header Section */}
      <div className="fixed top-0 left-0 right-0 z-10 bg-white/95 backdrop-blur-sm">
        <div className="max-w-2xl mx-auto">
          <TranslatorHeader 
            title="美女翻译官" 
            onSettingsClick={() => {}}
            onSpeakerClick={() => setIsSpeakerOn(!isSpeakerOn)}
            isSpeakerOn={isSpeakerOn}
          />
          <LanguageSelector
            sourceLanguage={sourceLanguage}
            targetLanguage={targetLanguage}
            onSwap={handleSwapLanguages}
            onSourceChange={setSourceLanguage}
            onTargetChange={setTargetLanguage}
          />
          <FontSizeControl 
            size={fontSize} 
            onChange={setFontSize}
          />
        </div>
      </div>

      {/* Scrollable Content with Padding for Fixed Headers */}
      <div className="flex-1 mt-[12.5rem] mb-[4.5rem]">
        <TranslationResult
          fontSize={fontSize}
          isSpeakerOn={isSpeakerOn}
        />
      </div>

      {/* Fixed Input Bar */}
      <div className="fixed bottom-0 left-0 right-0 z-10">
        <div className="max-w-2xl mx-auto">
          <InputBar
            value={inputText}
            onChange={setInputText}
            sourceLanguage={sourceLanguage}
            targetLanguage={targetLanguage}
            isSpeakerOn={isSpeakerOn}
          />
        </div>
      </div>
    </div>
  );
};

export default TranslatorPage;